<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="../includes/importer.jsp"%>
<!doctype html>
<html>
<head>
<ht:head />
<script src="<spring:url value="/static/js/map/MapAbc.js"/>" type="text/javascript" charset="utf-8"></script>
<script src="<spring:url value="/static/js/uploadify/jquery.uploadify.js"/>" type="text/javascript" charset="utf-8"></script>
<link href="<spring:url value="/static/js/uploadify/uploadify.css"/>" rel="stylesheet" type="text/css" />
 <script src="<spring:url value="/static/js/jquery.ztree.all-3.5.js"/>" type="text/javascript" charset="utf-8"></script>
         <link href="<spring:url value="/static/js/zTreeStyle/zTreeStyle.css"/>" rel="stylesheet" type="text/css" />
<script type="text/javascript">

$().ready(function() {
  	
	// -- 库存
	$("#unlimitedStockNum").click(function(){
		 if($("#unlimitedStockNum").attr("checked")=="checked"){
			 $("#stockNum").attr({ readonly: 'true' });  
			 $("#stockNum").val("9999999");
	        }else{
	        	$("#stockNum").removeAttr("readonly");
	        	 $("#stockNum").val("");
	        }
	});
	
	// -- 单个用户购买数量限制
	$("#unLimitedUserPerBuyNum").click(function(){
		 if($("#unLimitedUserPerBuyNum").attr("checked")=="checked"){
			 $("#userPerBuyNum").attr({ readonly: 'true' });  
			 $("#userPerBuyNum").val("0");
	        }else{
	        	$("#userPerBuyNum").removeAttr("readonly");    	
	        }
	});
	
	//上传封面logo图片
	$("#uploadPropertyPic").uploadify({
		height        : 25,
		removeCompleted:true,
		swf           : G_CTX_ROOT + '/static/js/uploadify/uploadify.swf',
		width         : 90,
		uploader:  "${ctx}/imgUpload/cover/${uploadImgId};jsessionid=<%=request.getRequestedSessionId()%>",
		onUploadSuccess:function(file, data, response){
				var timestamp = new Date().getTime();
				var path = data+"?d="+timestamp
				$("#logoImg").attr("src","${coverImagePath }${imageInfo.image_path }"+path);
				$("#imgPath").val(data);
		}
	});
	
	//批量上传详情图片
	$("#batchUploadPic1").uploadify({
		height        : 25,
		removeCompleted:true,
		swf           : G_CTX_ROOT + '/static/js/uploadify/uploadify.swf',
		width         : 90,
		uploader:  "${ctx}/imgUpload/info/${uploadImgId};jsessionid=<%=request.getRequestedSessionId()%>",
		onUploadSuccess:function(file, data, response){
			var timestamp = new Date().getTime();
			var path = data+"?d="+timestamp;
			$("#jzImgBox").append("<input name='jzImgId' type='hidden' value=''>"+
					"<div><label style='margin-left: 130px;''>排序数值：</label>"+
					"<input type='text' style='width:50px' name='orderNum'>"+
					"<div class='input'><img src=${infoImagePath }${imageInfo.image_path }"+path+" height='95' width='130'>"+
					"<input type='hidden' name='jzImgPath' value='"+data+"'>"+
					"<a href='javascript:void(0);' onclick=delImg('"+data+"',this,0)>删除</a></div><br><div>");
			$("#zwtu").hide();
		}
	});
	
	
	$("#radio-9").change(function(){
		if($(this).attr("checked")) {
			$("#logisticsFeeDiv").hide();
			$("#logisticsFee").val("");
		}
	});
	$("#radio-10").change(function(){
		if($(this).attr("checked")) {
			$("#logisticsFeeDiv").show();
		}
	});
	
	$("#typeName").focus(function() {
		selectType(2,function(typeId,typeName) {
			if(typeId && typeName) {
				$("#typeId").val(typeId);
				$("#typeName").val(typeName);
			}
		},null)
	});
	
});

	//删除详情图片
	function delImg(imgpath,el,fileId){
    	if(confirm("是否将此图片删除?")){
		$.ajax({
			type : "POST",
			url : "${ctx}/imgUpload/info/deleteItemImgAjax/"+fileId+"?imgPath="+imgpath,
			cache : false,
			dataType : "json",
			success : function(r) {
				simpleAlert(r.message,function() {
					//window.location.reload();
					$(el).parent().parent().remove();
				});
			}
		});
    	}
    }
	
	/**
	 * 选择商品分类
	 * @param type
	 * @param callback
	 * @param opts
	 */
	function selectType(type,callback,opts){
		var param = $.extend({
			Height: 400,
			Width : 900,
		},opts||{});
		
		var url = G_CTX_ROOT + "/itemsale/selectType?type=" + type;
		
		showDialog("选择商品分类",url,function(doc,win){
			var checkObj = $("span[treenode_check][class='button chk radio_true_full']",doc).parent().attr("name");
			if(checkObj && jQuery.isFunction(callback)){
				var arr = checkObj.split("_");
				callback(arr[0],arr[1]);
			}
		},param);
	}
	
	// -- 关联活动
	function selectLinkActivities(opts){
		var param = $.extend({	
			ShowMessageRow:false,
			Height: 600,
			Width : 800},opts||{});
		
		var url = G_CTX_ROOT + '/itemsale/activities';
		
		showDialog("关联活动",url, function(doc,win){
			var ac = $("input[name='acId']:checked",doc);
			if(!jQuery.isEmptyObject(ac)){
				var id = ac.val();
				var name = ac.siblings().val();
				console.log(id+"_"+name)
				$("#acName").val(name);
				$("#acId").val(id);
			}
		},param);
		}
	
	// -- 表单提交事件
	function check() {
		var imgPath = $("#imgPath").val();
		if(!imgPath) {
			simpleWarn("请上传商品封面图片！", null);
			return false;
		}
		
		var orderNums = $("input[name='orderNum']");
		for(var i=0; i<orderNums.length; i++) {
			if(!orderNums.eq(i).val()){
				simpleWarn("第"+(i+1)+"张详情图片排序数值不能为空！", null);
				return false;
			} else if(isNaN(orderNums.eq(i).val())) {
				simpleWarn("第"+(i+1)+"张详情图片排序数值不合法！", null);
				return false;
			}
		}
	} 
	
</script>

</head>
<body>
	<div id="content">
		<!-- forms -->
		<div class="box">
			<!-- box / title -->
			<div class="title">
				<h5>
					新增商品
					</h5>
			</div>
			<!-- end box / title -->
			<form:form method="post" id="fm" onsubmit="return check()" commandName="itemSale" htmlEscape="true" acceptCharset="utf-8" cssClass="required-validate">
				<div class="form">
					<div class="fields">
						<input type="hidden" name="id" value="${itemSale.id }">
						<div class="field">
							<div class="label">
								<label for="name" class="req">商品名称：</label>
							</div>
							<div class="input">
								<form:input path="name" cssClass="required" maxlength="20"/>
							</div>
						</div>
						
						<div class="field">
							<div class="label">
								<label for="shortName" class="req">商品简称：</label>
							</div>
							<div class="input">
								<form:input path="shortName" cssClass="required" maxlength="20"/>
							</div>
						</div>
						
						<div class="field">
							<div class="label">
								<label for="warmPrompt" class="req">温馨提示：</label>
							</div>
							<div class="input">
								<form:input path="warmPrompt" cssClass="required" maxlength="20"/>
							</div>
						</div>
						
						<div class="field">
							<div class="label label-textarea">
								<label for="remark" class="req">商品介绍：</label>
							</div>
							<div class="input">
								<form:input path="remark" cssClass="required" maxlength="200"/>
							</div>
						</div>
						
						
						<div class="field" id="typeIdDiv">
							<div class="label">
								<label for="typeId" class="req">商品分类：</label>
							</div>
							<div class="input">
								<form:hidden path="typeId" cssClass="small required" maxlength="100" />
								<input id="typeName" maxlength="100" readonly="true" cssClass="small required" value="${itemSale.typeName }" />
								<span class="error" id="advice-required-typeName" style="display:none"></span>
							</div>
						</div>
						<div id="treeContainer" class="ztree"></div>
						
						<div class="field">
							<div class="label">
								<label for="weight" class="req">重量：</label>
							</div>
							<div class="input">
								<form:input path="weight" cssClass="required validate-number min-value-0"   maxlength="10"/>
							</div>
						</div>
						

						<!-- 是否需要物流 -->
						<div class="field" id="postFlagDiv">
							<div class="label label-radio">
								<label>是否需要物流:</label>
							</div>
							<div class="radios">
								<div class="radio">
									<input type="radio" id="radio-9" name="postFlag" value="0" class="validate-one-required" 
									<c:if test="${itemSale.postFlag==0 }">checked="checked"</c:if>/>
									<label for="radio-9">不需要物流配送</label> 
									<input type="radio" id="radio-10" name="postFlag" value="1" class="validate-one-required"
									<c:if test="${itemSale.postFlag==1 }">checked="checked"</c:if>/>
									<label for="radio-10">需要物流配送</label>
								</div>
								<span class="error" id="advice-validate-one-required-postFlag"
									style="display:none"></span>
							</div>
						</div>
						
						
						<div class="field" id="logisticsFeeDiv" <c:if test="${itemSale.postFlag==0 }">style="display: none;"</c:if>>	
							<div class="label">
								<label for="logisticsFee" class="req">物流运费:</label>
							</div>
							<div class="input">
								 <form:input path="logisticsFee" cssClass=" required validate-number min-value-0" maxlength="9"/>
								 <span class="error" id="advice-required-logisticsFee" style="display:none"></span>
							</div>
						</div>
						
						<div class="field">
							<div class="label">
								<label for="saleStartTime" class="req">销售有效开始时间:</label>
							</div>
							<div class="input" style="margin-left: 140px;">
								<input type="text" id="saleStartTime" name="saleStartTime" value="${itemSale.saleStartTime }"
									 readOnly  class="date required"
									onfocus="WdatePicker({dateFmt:'yyyyMMddHHmmss' ,maxDate:'#F{$dp.$D(\'saleStopTime\')||\'2020-10-01\'}'})" />
							</div>
						</div>
						
						<div class="field">
							<div class="label">
								<label for="saleStopTime" class="req">销售有效结束时间:</label>
							</div>
							<div class="input" style="margin-left: 140px;">
								<input type="text" id="saleStopTime" name="saleStopTime"  readOnly  class="date required" value="${itemSale.saleStopTime }"
									onfocus="WdatePicker({dateFmt:'yyyyMMddHHmmss',minDate:'#F{$dp.$D(\'saleStartTime\')}',maxDate:'2020-10-01'})" />
							</div>
						</div>
						
						<div class="field" id="numLimit">
							<div class="label">
								<label for="userPerBuyNum" class="req">单个用户购买数量:</label>
							</div>
							<div class="input" style="margin-left: 140px;">
								<form:input path="userPerBuyNum" cssClass="required validate-number min-value-0" maxlength="8"  />
								<input type="checkbox" id="unLimitedUserPerBuyNum" name="unlimitedStockNum" value="0"    >不限
								<span class="error" id="advice-required-userPerBuyNum" style="display:none"></span>
							</div>
						</div>
						
						<div class="field" >
							<div class="label">
								<label for="stockNum" class="req">商品库存:</label>
							</div>
							<div class="input">
								<form:input path="stockNum" cssClass=" required validate-number min-value-1 int-range-1-9999999"maxlength="8" />
								<input type="checkbox" id="unlimitedStockNum" name="unlimitedStockNum" value="0"    >不限
								<span class="error" id="advice-required-stockNum" style="display:none"></span>
							</div>
						</div>
						
						<div class="field" >
							<div class="label">
								<label for="marketPrice" class="req">市场价:</label>
							</div>
							<div class="input">
								<form:input path="marketPrice" cssClass="required validate-number min-value-0.1"
									maxlength="9" />
								<span class="error" id="advice-required-marketPrice"
									style="display:none"></span>
							</div>
						</div>
						
						<div class="field" >
							<div class="label">
								<label for="shopPrice" class="req">售价:</label>
							</div>
							<div class="input">
								<form:input path="shopPrice" cssClass="required validate-number min-value-0.1"
									maxlength="9" />
								<span class="error" id="advice-required-shopPrice" style="display:none"></span>
							</div>
						</div>
						
						<div class="field" >
							<div class="label">
								<label >关联活动:</label>
							</div>
							<div class="input">
								<input type="text" id="acName" value="${activities[0] }" onclick="selectLinkActivities(null)" readonly="readonly">
								<input type="hidden" name="acId" id="acId" value="${activities[1] }">
							</div>
						</div>
						
						 <div class="field">
                    <div class="label">
                    	<label for="uploadfile" class="req">商品封面LOGO：</label>
	                    </div>
	                    <div class="input">
	                    	<img id="logoImg" src="${coverImagePath }${itemSale.imgPath }" style="background: #ECE9D8" height="95" width="130">
	                    </div>
	                    <div class="input" style="width: 120px;">
	                    	<input type="file" id="uploadPropertyPic" name="uploadPropertyPic" style="display:none; margin-left: 10px;"  size="0" />
	                    	<input type="hidden" name="imgPath" id="imgPath" value="${itemSale.imgPath }" cssClass="required">
	                   	</div>
	                    <div class="img-size-desc" style="margin-left: 79px; color: red;">建议图片大小为 800*800 或 600*600</div>
                	</div>
						
				<div class="field">
                    <div class="label">
                    	<label for="uploadfile" >商品详情LOGO：</label>
                    </div>
                     
                    <div id="jzImgBox">
                    	<c:forEach items="${imageInfos }" var="imageInfo">
                    		<div>
                    			<input name="jzImgId" type="hidden" value="${imageInfo.id }">
								<label style="margin-left: 130px;">排序数值：</label>
								<input type='text' name='orderNum' value="${imageInfo.order_num }" style="width:50px;">
								<div class="input">
									<img src='${infoImagePath }${imageInfo.image_path }' height='95' width='130'>
									<input type='hidden' name='jzImgPath' value='${imageInfo.IMAGE_PATH }'>
									<a href='javascript:void(0);' onclick=delImg("${imageInfo.IMAGE_PATH }",this,${imageInfo.id })>删除</a>
								</div>
								<br>
							</div>
						</c:forEach>
						<c:if test="${empty imageInfos}" var="emptylist1">
		                    <div class="input" id="zwtu">
		                    	<img src="${ctx }/static/images/zwtp.png" id="jzImg" style="background: #ECE9D8" height="95" width="130">
		                   	</div>
	                   	</c:if>
	                 </div>
	                 
                   	<div class="input"><input type="file" id="batchUploadPic1" name="batchUploadPic1" style="display:none"  size="0" /></div>
                	<div class="img-size-desc" style="margin-left: 79px; color: red;">建议图片大小为 800*800 或 600*600</div>
                </div>

						<div class="buttons">
							<div class="highlight">
								<input type="submit" name="submit.highlight" value="提交" />
							</div>
							<input type="reset" name="reset" value="重置" /> 
							<a href="${ctx}/itemsale/list" class="btnAnchor">返回</a>
						</div>
					</div>
				</div>
			</form:form>
		</div>
		<!-- end forms -->
	</div>
</body>
</html>